<template>
  <nav class="aui-navbar" :class="`aui-navbar--${store.state.navbarLayoutType}`">
    <div class="aui-navbar__header">
      <h1 class="aui-navbar__brand" @click="$router.push({ name: 'home' })">
        <a class="aui-navbar__brand-lg" href="javascript:;">掌上进销存后台</a>
        <a class="aui-navbar__brand-mini" href="javascript:;">掌上</a>
      </h1>
    </div>
    <div class="aui-navbar__body">
      <el-menu class="aui-navbar__menu mr-auto" mode="horizontal" :ellipsis="false">
        <el-menu-item index="1" @click="store.state.sidebarFold = !store.state.sidebarFold">
          <svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch" aria-hidden="true"><use xlink:href="#icon-outdent"></use></svg>
        </el-menu-item>
        <el-menu-item index="2" @click="refresh(store)">
          <svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--refresh" aria-hidden="true"><use xlink:href="#icon-sync"></use></svg>
        </el-menu-item>
      </el-menu>

      <el-menu class="aui-navbar__menu" mode="horizontal" :ellipsis="false">
        <el-menu-item index="4" @click="fullscreenHandle()">
          <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-fullscreen"></use></svg>
        </el-menu-item>
        <el-menu-item index="5" class="aui-navbar__avatar">
          <el-dropdown placement="bottom" :show-timeout="0">
            <span class="el-dropdown-link">
              <img src="../assets/img/avatar.png">
              <span>{{ store.state.user.name }}</span>
              <el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item>
                <el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 弹窗, 修改密码 -->
    <update-password v-if="updatePasswordVisible" ref="updatePasswordRef"></update-password>
  </nav>
</template>
<script setup>
import screenfull from 'screenfull'
import UpdatePassword from './main-navbar-update-password.vue'
import {useStore} from "vuex";
import {inject, nextTick, ref} from "vue";
import {clearLoginInfo} from "../utils/util.js";
import {useRouter} from "vue-router";
import http from "../utils/request.js";
import {message, messageBox, refresh} from "../utils/commonScript.js";
import {ArrowDown} from "@element-plus/icons-vue";

const store = useStore()
const router = useRouter()

const updatePasswordRef = ref()
const updatePasswordVisible = ref(false)
const messageTip = ref(false)
// 全屏
const fullscreenHandle = () => {
  console.log(screenfull)
  if (!screenfull.isEnabled) {
    return message({
      message: '您的浏览器不支持此操作',
      type: 'warning',
      duration: 500
    })
  }
  screenfull.toggle()
}

// 修改密码
const updatePasswordHandle = () => {
  updatePasswordVisible.value = true
  nextTick(() => {
    updatePasswordRef.value.init()
  })
}
// 退出
const logoutHandle = () => {
  messageBox.confirm('确定进行退出操作?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    http.post('/logout').then(({ data: res }) => {
      if (res.code !== 0) {
        return message.error(res.msg)
      }
      clearLoginInfo()
      router.push({ path: '/login' })
    }).catch(() => {})
  }).catch(() => {})
}
</script>
